<script setup>
import { ref, watch, onMounted } from 'vue';
import { getConfigGroupList, getConfigByGroup } from '@/api/backend/config.js';
const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
const breadcrumbItems = ref([{ label: '网站管理' }, { label: '网站设置' }]);

const items = ref([
    { route: '/backend/config/index.html?id=1', label: '基本设置' },
    { route: '/backend/config/index.html?id=3', label: '邮件设置' },
    { route: '/backend/config/index.html?id=8', label: '联系方式' }
]);
</script>
<template>
    <div>
        <div class="card">
            <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
            <Tabs value="/backend">
                <TabList>
                    <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
                        <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
                            <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
                                <span>{{ tab.label }}</span>
                            </a>
                        </router-link>
                    </Tab>
                </TabList>
            </Tabs>
            <div class="card flex flex-col gap-4">
                <div class="font-semibold text-xl">网站设置</div>
                <div class="grid grid-cols-12 gap-2">
                    <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0 text-lg">网站名称：</label>
                    <div class="col-span-12 md:col-span-10">
                        <InputText size="large" id="name3" type="text" fluid />
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-2">
                    <label for="name4" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0 text-lg">网站Logo：</label>
                    <div class="col-span-12 md:col-span-10 flex flex-wrap items-start gap-4">
                        <div class="field">
                            <InputText size="large" id="name4" required="true" fluid />
                        </div>

                        <ButtonGroup>
                            <Button label="上传" icon="pi pi-upload" />
                            <Button label="选择" icon="pi pi-folder-open" />
                            <Button label="预览" icon="pi pi-eye" />
                        </ButtonGroup>
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-2">
                    <label for="name5" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0 text-lg">首页视频：</label>
                    <div class="col-span-12 md:col-span-10 flex flex-wrap items-start gap-4">
                        <div class="field">
                            <InputText id="name5" size="large" required="true" fluid />
                            <Message size="small" severity="secondary" variant="simple">请上传mp4格式视频，大小建议5M以内</Message>
                        </div>
                        <ButtonGroup>
                            <Button label="上传" icon="pi pi-upload" />
                            <Button label="选择" icon="pi pi-folder-open" />
                        </ButtonGroup>
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-2">
                    <label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0 text-lg">ICP备案号：</label>
                    <div class="col-span-12 md:col-span-10">
                        <InputText size="large" id="email3" type="text" />
                    </div>
                </div>
            </div>
        </div>
        <Button label="保存设置" :fluid="false" size="large"></Button>
    </div>
</template>
